import React, { useRef, useState, useEffect } from "react";
import { Canvas } from "@react-three/fiber";
//useLoader 用于加载资源，这里用于加载 GLTF 模型；useFrame 用于在每一帧渲染时执行回调函数，可用于更新动画等。
import { useLoader, useFrame } from "@react-three/fiber";
//Three.js 提供的加载器，用于加载 GLTF 格式的 3D 模型。
import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader.js";
//AnimationMixer、AnimationClip 和 AmbientLight：Three.js 中的类，AnimationMixer 用于混合和播放动画；AnimationClip 表示一个动画片段；AmbientLight 是环境光，用于照亮整个场景。
import { AnimationMixer, AnimationClip, AmbientLight } from "three";
import { OrbitControls } from "@react-three/drei";

// 为 AnimatedModel 组件的 props 添加类型
interface AnimatedModelProps {
  modelPath: string;
  scale?: [number, number, number]; // 添加可选的 scale 属性
  position?: [number, number, number]; // 添加可选的 scale 属性
}

const AnimatedModel: React.FC<AnimatedModelProps> = ({
  modelPath,
  scale = [1, 1, 1],
  position = [0, 0, 0],
}) => {
  // 加载 GLTF 模型及动画数据
  const gltf = useLoader(GLTFLoader, modelPath);
  // 使用 useRef 存储 AnimationMixer
  const mixer = useRef<AnimationMixer>(new AnimationMixer(gltf.scene));
  // 使用 useState 存储动画数据
  const [animations] = useState<AnimationClip[]>(gltf.animations);
  // 灯光 环境光
  const light = new AmbientLight(0x000000, 1);
  gltf.scene.add(light);
  // 使用 useEffect 设置动画播放
  useEffect(() => {
    if (animations && animations.length > 0) {
      animations.forEach((cilp) => {
        mixer.current.clipAction(cilp).play();
      });
    }
  }, [animations]);

  // 在每一帧更新动画
  useFrame((state, delta) => mixer.current.update(delta));
  // 设置模型的缩放
  gltf.scene.scale.set(...scale);
  gltf.scene.position.set(...position);
  return <primitive object={gltf.scene} />;
};

const Three: React.FC = () => {
  return (
    <>
      <Canvas>
        <ambientLight />
        <directionalLight position={[0, -3, 0]} />
        {/* 设置人物模型的缩放比例，例如：[0.5, 0.5, 0.5] */}
        {/* 使用 AnimatedModel 组件加载模型，并设置缩放比例 */}
        <AnimatedModel
          modelPath="../../../public/mouse.glb"
          position={[-0.5, -3, -2.5]}
          scale={[3, 3, 3]}
        />
        {/* 控制视角 */}
        <OrbitControls />
      </Canvas>
    </>
  );
};

export default Three;
